<template>
  <div class="content">
    <FirstScreen
      :FirstImg="FirstImg"
      :title="title"
      :content="content"
    ></FirstScreen>
    <TeacherModule :teacherImgs='teacherImgs' ></TeacherModule>
    <div class="project">
      <div class="title">科研项目</div>
      <div class="detail">
        <div v-for="(item, index) in teacherImgs" :key="index"></div>
      </div>
    </div>
  </div>
</template>

<script>
import FirstScreen from "@/components/common/FirstScreen";
import TeacherModule from "@/components/common/TeacherModule";
export default {
  name: "Science",
  components: {
    FirstScreen,
    TeacherModule
  },
  data() {
    return {
      FirstImg:
        "https://img20.360buyimg.com/da/jfs/t3154/175/5917485830/129679/f123634c/5897e6a2N83837dd2.jpg",
      title: "科研方向",
      content:
        "卡拉受不了的海拔手机端比较好刷卡机的空间内部卡拉受不了的海拔手机端比较好刷卡机的空间内部啥的客户编号萨贝达卡拉受不了的海拔手机端比较好刷卡机的空间内部",
      teacherImgs: [
        {
          url:
            "https://img11.360buyimg.com/da/jfs/t4000/107/2234194410/85271/6c24d985/58a50cafNb60886c9.jpg",
          id: 0,
        },
        {
          url:
            "https://img20.360buyimg.com/da/jfs/t3154/175/5917485830/129679/f123634c/5897e6a2N83837dd2.jpg",
          id: 1,
        },
        {
          url:
            "https://img1.360buyimg.com/da/jfs/t3133/89/5984232745/66970/beaf615c/589ac9bcNe544a72e.jpg",
          id: 2,
        },
        {
          url:
            "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
          id: 3,
        },
      ],
    };
  },
  mounted: function () {},
  methods: {},
};
</script>

<style lang="less" scoped>
.content {
  
  .project {
    width: 1200px;
    height: 900px;
    margin: 0 auto;
    .title {
      height: 50px;
      margin: 20px 30px;
      text-align: center;
      font-size: 25px;
      border-bottom: solid #e3e3e3 2px;
    }
    .detail {
      position: relative;
      width: 100%;
      height: 90%;
      :nth-child(1) {
        position: absolute;
        left: 100px;
        top: 50px;
        width: 400px;
        height: 250px;
        background: red;
      }
      :nth-child(2) {
        position: absolute;
        right: 100px;
        top: 90px;
        width: 400px;
        height: 250px;
        background: red;
      }
      :nth-child(3) {
         position: absolute;
        left: 160px;
        top: 430px;
        width: 400px;
        height: 250px;
        background: red;
      }
      :nth-child(4) {
        position: absolute;
        right: 50px;
        top: 470px;
        width: 400px;
        height: 250px;
        background: red;
      }
    }
  }
}
</style>